<template xmlns:th="http://www.w3.org/1999/xhtml">
  <div class="homepage">
    <img v-if="logo" :src="logo" class="gaoxin-logo"/>
    <h1>欢迎使用大医云康康复系统</h1>
    <div class="footer">
      <span>Copyright © 2020-{{new Date().getFullYear()}} <a target="_blank" href="http://www.daincon.com/">西安大医云康信息科技有限公司</a> All Rights Reserved.</span>
    </div>
  </div>
</template>

<script>
import PanelGroup from "./system/index/index";
import LineChart from "./dashboard/LineChart";
import {
  listIndex,
  listIndexWeek,
  listIndexLine1,
  listIndexLine2,
  listIndex2,
  listIndex3,
} from "@/api/system/index";
import logoImg from '@/assets/logo/logo.png'

const lineChartData = {
  newVisitis: {
    week1: [],
    week2: [],
    time: [],
  },
  messages: {
    week1: [],
    week2: [],
    time: [],
  },
  purchases: {
    week1: [],
    week2: [],
    time: [],
  },
  shoppings: {
    week1: [],
    week2: [],
    time: [],
  },
};

export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
  },
  data() {
    return {
      lineChartData: lineChartData.purchases,
      weekTime1: [], //周 待评估时间列表
      weekTime2: [], //周 已评估时间列表
      time: [],
      weekData1: [], //周 待评估人次列表
      weekData2: [], //周 已评估人次列表
      flag: 0,
      logo: logoImg,
    };
  },

  created() {
    this.getList();
  },
  mounted() {
    // this.flag = 0
    /*lineChartData.purchases.week1 = [];
    lineChartData.purchases.week2 = [];
    lineChartData.purchases.time = [];

    lineChartData.shoppings.week1 = [];
    lineChartData.shoppings.week2 = [];
    lineChartData.shoppings.time = [];*/
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    getList() {
      // 查询 周 待评估时间 及 每天对应的待评估人次
      Promise.all([listIndexLine1(), listIndexLine2()]).then(response => {
        response[0].rows.forEach(item => {
          this.weekData1.push(item.status * 1);
        })
        response[0].rows.forEach(item => {
          this.weekTime1.push(item.timeWeek);
        })
        response[1].rows.forEach(item => {
          this.weekData2.push(item.status * 1);
        })
        response[1].rows.forEach(item => {
          this.weekTime2.push(item.timeWeekDone);
        })
        this.lineChartHandler();
      });
    },
    // 获取当前日期前七天的 MM-dd，并组成数组
    getPreSevenDay() {
      let date = new Date();
      let result = [];
      for (let i = 0; i < 7; i++) {
        let day = new Date(date.getTime() - i * 24 * 3600 * 1000);
        let month = day.getMonth() + 1;
        let dayDate = day.getDate();
        let markMonth = '';
        let markDay = '';
        month < '10' ? markMonth = '0' : markMonth = '';
        dayDate < '10' ? markDay = '0' : markDay = '';
        result.push(`${markMonth}${month}-${markDay}${dayDate}`);
      }
      result = result.reverse();
      return result
    },
    // 处理折线图所需的数据
    lineChartHandler() {
      // 获取前7天日期
      let sevenDay = this.getPreSevenDay();
      // 对查询到的时间去重、排序
      let timeList = Array.from(new Set(this.weekTime1.concat(this.weekTime2)));
      timeList.sort(function (x, y) {
        if (x < y) {
          return -1;
        }
        if (x > y) {
          return 1;
        }
        return 0;
      });
      // 将待评定人次插入到对应的日期中
      let data1 = [];
      for (let i = 0; i < sevenDay.length; i++) {
        const index = this.weekTime1.indexOf(sevenDay[i])
        if (index > -1) {
          data1[i] = this.weekData1[index]
        } else {
          data1[i] = 0
        }
      }
      // 将已评定人次插入到对应的日期中
      let data2 = [];
      for (let i = 0; i < sevenDay.length; i++) {
        const index = this.weekTime2.indexOf(sevenDay[i])
        if (index > -1) {
          data2[i] = this.weekData2[index]
        } else {
          data2[i] = 0
        }
      }


      lineChartData.purchases.time = sevenDay;
      lineChartData.purchases.week1 = data1;
      lineChartData.purchases.week2 = data2;
    }
  },
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.homepage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  line-height: 50px;
  height: 50px;
  background-color: #f8f8f8;
  border-top: 1px solid #ccc;
}
.gaoxin-logo {
  width: 500px;
  height: auto;
}


</style>
